<template>
	<view class="container">
		<!-- Header -->
		<view class="header">
			<view class="header-bg"></view>
			<view class="header-pattern"></view>

			<view class="header-content">
				<view class="user-info">
					<view class="avatar">
						<image src="/static/img/user-avatar.png" mode="aspectFill"></image>
					</view>
					<view class="user-details">
						<text class="title">我的题库</text>
						<view class="badge-container">
							<view class="badge">
								<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"
									fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
									stroke-linejoin="round" class="badge-icon">
									<path
										d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z">
									</path>
								</svg>
								<text>高级会员</text>
							</view>
							<text class="study-days">学习天数: 128</text>
						</view>
					</view>
				</view>

				<view class="header-actions">
					<view class="action-btn">
						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<circle cx="11" cy="11" r="8"></circle>
							<path d="m21 21-4.3-4.3"></path>
						</svg>
					</view>
					<view class="action-btn notification-btn">
						<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
							stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
							<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
							<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
						</svg>
						<view class="notification-dot"></view>
					</view>
				</view>
			</view>

			<view class="search-container">
				<view class="search-input">
					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
						stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
						class="search-icon">
						<circle cx="11" cy="11" r="8"></circle>
						<path d="m21 21-4.3-4.3"></path>
					</svg>
					<input type="text" placeholder="搜索题目、知识点..." />
				</view>
			</view>
		</view>

		<!-- Main Content -->
		<view class="main-content">
			<!-- Category Cards -->
			<category-cards></category-cards>

			<!-- Study Stats -->
			<study-stats></study-stats>

			<!-- Recommended Section -->
			<recommended-section></recommended-section>

			<!-- Question Bank List -->
			<question-bank-list></question-bank-list>
		</view>
	</view>
</template>

<script setup>
import { onMounted } from 'vue';
import CategoryCards from '../components/category-cards.vue';
import StudyStats from '../components/study-stats.vue';
import RecommendedSection from '../components/recommended-section.vue';
import QuestionBankList from '../components/question-bank-list.vue';

onMounted(() => {
	// 初始化页面数据或执行必要的设置
	if (typeof uni !== 'undefined') {
		uni.setNavigationBarTitle({
			title: '我的题库'
		});
	} else {
		console.warn('uni 未定义。这可能是在 uni-app 环境外运行。');
	}
});
</script>

<style>
.container {
	min-height: 100vh;
	background: linear-gradient(to bottom, rgba(239, 246, 255, 0.6), rgba(255, 255, 255, 1));
	position: relative;
}

.header {
	position: relative;
	padding: 0 0 20rpx 0;
}

.header-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to bottom, #3b82f6, #2563eb);
	z-index: -2;
}

.header-pattern {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('/static/img/home-bg.png');
	background-size: cover;
	background-position: center;
	opacity: 0.1;
	z-index: -1;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 30rpx 30rpx 0;
}

.user-info {
	display: flex;
	align-items: center;
}

.avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.5);
	overflow: hidden;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.user-details {
	margin-left: 20rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #ffffff;
}

.badge-container {
	display: flex;
	align-items: center;
	margin-top: 6rpx;
}

.badge {
	display: flex;
	align-items: center;
	background-color: rgba(59, 130, 246, 0.3);
	border-radius: 30rpx;
	padding: 4rpx 12rpx;
}

.badge-icon {
	margin-right: 6rpx;
	color: #e0f2fe;
}

.badge text {
	font-size: 20rpx;
	color: #e0f2fe;
}

.study-days {
	font-size: 20rpx;
	color: #bfdbfe;
	margin-left: 16rpx;
}

.header-actions {
	display: flex;
	gap: 10rpx;
}

.action-btn {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	backdrop-filter: blur(4px);
}

.notification-btn {
	position: relative;
}

.notification-dot {
	position: absolute;
	top: 14rpx;
	right: 14rpx;
	width: 16rpx;
	height: 16rpx;
	border-radius: 50%;
	background-color: #ef4444;
	border: 4rpx solid #2563eb;
}

.search-container {
	padding: 20rpx 30rpx 0;
	margin-top: 20rpx;
}

.search-input {
	position: relative;
	height: 80rpx;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4px);
}

.search-icon {
	color: #60a5fa;
	margin-right: 16rpx;
}

.search-input input {
	flex: 1;
	height: 80rpx;
	font-size: 28rpx;
	color: #1e3a8a;
}

.search-input input::placeholder {
	color: #93c5fd;
}

.main-content {
	padding: 30rpx;
	padding-bottom: 160rpx;
}
</style>